<template>
  <div class="netease-news">
    <!-- 顶部导航栏 -->
    <header class="top-nav">
      <div class="nav-container">
        <div class="logo">
          <img src="https://news.163.com/favicon.ico" alt="网易新闻" />
          <span>网易新闻</span>
        </div>
        <nav class="main-nav">
          <a href="#" class="nav-item active">首页</a>
          <a href="#" class="nav-item">国内</a>
          <a href="#" class="nav-item">国际</a>
          <a href="#" class="nav-item">财经</a>
          <a href="#" class="nav-item">体育</a>
          <a href="#" class="nav-item">娱乐</a>
          <a href="#" class="nav-item">军事</a>
          <a href="#" class="nav-item">科技</a>
          <a href="#" class="nav-item">汽车</a>
          <a href="#" class="nav-item">时尚</a>
          <a href="#" class="nav-item">游戏</a>
          <a href="#" class="nav-item">数码</a>
          <a href="#" class="nav-item">教育</a>
          <a href="#" class="nav-item">健康</a>
          <a href="#" class="nav-item">艺术</a>
        </nav>
        <div class="user-actions">
          <button class="login-btn">登录</button>
          <button class="register-btn">注册</button>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="content">
      <div class="container">
        <!-- 头条新闻 -->
        <div class="headline-news">
          <div class="headline-banner">
            <img src="https://img2.baidu.com/it/u=4165113552,271818268&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400" alt="头条新闻" />
            <div class="banner-info">
              <h2 class="banner-title">习近平会见吉尔吉斯斯坦总统 两国元首同意深化全面战略伙伴关系</h2>
              <p class="banner-summary">国家主席习近平10月1日在人民大会堂会见来华出席中国人民抗日战争暨世界反法西斯战争胜利80周年纪念活动的吉尔吉斯斯坦总统扎帕罗夫。</p>
            </div>
          </div>
        </div>

        <!-- 新闻内容区 -->
        <div class="news-content">
          <!-- 左侧新闻列表 -->
          <div class="news-list">
            <!-- 焦点新闻 -->
            <div class="focus-news">
              <h3 class="section-title">新闻台•焦点</h3>
              <div class="news-item important">
                <h4 class="news-title">习近平会见哈萨克斯坦总统 就中哈关系发展达成重要共识</h4>
                <p class="news-summary">两国元首宣布，将中哈关系提升为新时代全天候全面战略伙伴关系。</p>
                <div class="news-meta">
                  <span class="source">央视新闻</span>
                  <span class="time">2小时前</span>
                  <span class="comments">1288评论</span>
                </div>
              </div>
               
              <div class="news-item">
                <h4 class="news-title">纪念中国人民抗日战争暨世界反法西斯战争胜利80周年大会在京隆重举行</h4>
                <div class="news-meta">
                  <span class="source">新华社</span>
                  <span class="time">4小时前</span>
                  <span class="comments">3456评论</span>
                </div>
              </div>
               
              <div class="news-item">
                <h4 class="news-title">新一轮强冷空气将影响我国大部地区 北方多地将出现大风降温</h4>
                <div class="news-meta">
                  <span class="source">中央气象台</span>
                  <span class="time">6小时前</span>
                  <span class="comments">892评论</span>
                </div>
              </div>
               
              <div class="news-item">
                <h4 class="news-title">国务院发布关于进一步 mosque lowersystem制度性交易成本的意见</h4>
                <div class="news-meta">
                  <span class="source">中国政府网</span>
                  <span class="time">8小时前</span>
                  <span class="comments">567评论</span>
                </div>
              </div>
            </div>

            <!-- 财经新闻 -->
            <div class="finance-news">
              <h3 class="section-title">财经</h3>
              <div class="news-item">
                <h4 class="news-title">央行：9月新增人民币贷款1.85万亿元 M2同比增长8.3%</h4>
                <div class="news-meta">
                  <span class="source">中国人民银行</span>
                  <span class="time">10小时前</span>
                  <span class="comments">432评论</span>
                </div>
              </div>
               
              <div class="news-item">
                <h4 class="news-title">前三季度GDP同比增长5.2% 经济运行保持恢复向好态势</h4>
                <div class="news-meta">
                  <span class="source">国家统计局</span>
                  <span class="time">12小时前</span>
                  <span class="comments">789评论</span>
                </div>
              </div>
            </div>

            <!-- 科技新闻 -->
            <div class="tech-news">
              <h3 class="section-title">科技</h3>
              <div class="news-item">
                <h4 class="news-title">国产大飞机C919完成首次商业飞行 开启中国民航新时代</h4>
                <div class="news-meta">
                  <span class="source">中国商飞</span>
                  <span class="time">1天前</span>
                  <span class="comments">2345评论</span>
                </div>
              </div>
               
              <div class="news-item">
                <h4 class="news-title">人工智能大模型应用场景不断拓展 赋能千行百业</h4>
                <div class="news-meta">
                  <span class="source">科技日报</span>
                  <span class="time">1天前</span>
                  <span class="comments">1234评论</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧边栏 -->
          <aside class="sidebar">
            <!-- 热门排行 -->
            <div class="hot-ranking">
              <h3 class="sidebar-title">热门排行</h3>
              <ul class="ranking-list">
                <li class="ranking-item">
                  <span class="ranking-num top1">1</span>
                  <a href="#" class="ranking-title">习近平会见多国领导人 就双边关系发展达成重要共识</a>
                </li>
                <li class="ranking-item">
                  <span class="ranking-num top2">2</span>
                  <a href="#" class="ranking-title">纪念抗战胜利80周年大会在京隆重举行 习近平发表重要讲话</a>
                </li>
                <li class="ranking-item">
                  <span class="ranking-num top3">3</span>
                  <a href="#" class="ranking-title">国庆假期全国多地coming旅游高峰 文旅市场持续升温</a>
                </li>
                <li class="ranking-item">
                  <span class="ranking-num">4</span>
                  <a href="#" class="ranking-title">新一轮强冷空气来袭 北方多地将出现大风降温天气</a>
                </li>
                <li class="ranking-item">
                  <span class="ranking-num">5</span>
                  <a href="#" class="ranking-title">国产大型邮轮完成首次试航 年内将交付使用</a>
                </li>
                <li class="ranking-item">
                  <span class="ranking-num">6</span>
                  <a href="#" class="ranking-title">全球芯片产业链加速重构 中国半导体产业迎来新机遇</a>
                </li>
                <li class="ranking-item">
                  <span class="ranking-num">7</span>
                  <a href="#" class="ranking-title">国庆档电影票房突破50亿元 《长津湖》成最大赢家</a>
                </li>
                <li class="ranking-item">
                  <span class="ranking-num">8</span>
                  <a href="#" class="ranking-title">研究表明：每天坚持30分钟有氧运动可有效降低心脑血管疾病风险</a>
                </li>
                <li class="ranking-item">
                  <span class="ranking-num">9</span>
                  <a href="#" class="ranking-title">世界互联网大会在乌镇召开 聚焦数字经济发展新趋势</a>
                </li>
                <li class="ranking-item">
                  <span class="ranking-num">10</span>
                  <a href="#" class="ranking-title">我国成功发射新一代气象卫星 气象观测能力大幅提升</a>
                </li>
              </ul>
            </div>

            <!-- 广告区域 -->
            <div class="ad-section">
              <img src="https://img2.baidu.com/it/u=3139134782,2066835158&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200" alt="广告" />
            </div>

            <!-- 网易公开课 -->
            <div class="open-course">
              <h3 class="sidebar-title">网易公开课</h3>
              <div class="course-item">
                <img src="https://img2.baidu.com/it/u=2243439771,123456789&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=70" alt="公开课" />
                <div class="course-info">
                  <h4 class="course-title">中国古代历史文化</h4>
                  <p class="course-teacher">清华大学 李教授</p>
                </div>
              </div>
              <div class="course-item">
                <img src="https://img2.baidu.com/it/u=987654321,123456789&fm=253&fmt=auto&app=138&f=JPEG?w=100&h=70" alt="公开课" />
                <div class="course-info">
                  <h4 class="course-title">经济学原理</h4>
                  <p class="course-teacher">北京大学 张教授</p>
                </div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </main>

    <!-- 底部页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-links">
          <a href="#">关于我们</a>
          <span>|</span>
          <a href="#">联系方式</a>
          <span>|</span>
          <a href="#">招聘信息</a>
          <span>|</span>
          <a href="#">广告服务</a>
          <span>|</span>
          <a href="#">供稿服务</a>
          <span>|</span>
          <a href="#">法律声明</a>
          <span>|</span>
          <a href="#">网络举报</a>
        </div>
        <div class="copyright">
          <p>© 1997-2023 网易公司版权所有</p>
          <p> ICP证粤B2-20090191 </p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
  // 这里可以添加组件逻辑
</script>

<style scoped>
  /* 全局样式 */
  .netease-news {
    min-height: 100vh;
    background-color: #f4f4f4;
  }

  /* 顶部导航栏 */
  .top-nav {
    background-color: #c40000;
    height: 48px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .nav-container {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    display: flex;
    align-items: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
  }

  .logo img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }

  .main-nav {
    display: flex;
    flex: 1;
    margin-left: 40px;
  }

  .nav-item {
    color: white;
    text-decoration: none;
    padding: 0 12px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
  }

  .nav-item:hover {
    background-color: #a80000;
  }

  .nav-item.active {
    background-color: #a80000;
  }

  .user-actions {
    display: flex;
    align-items: center;
  }

  .login-btn,
  .register-btn {
    background: none;
    border: 1px solid white;
    color: white;
    padding: 4px 12px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 12px;
  }

  .login-btn:hover,
  .register-btn:hover {
    background-color: white;
    color: #c40000;
  }

  /* 主要内容区域 */
  .content {
    background-color: white;
  }

  .container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
  }

  /* 头条新闻 */
  .headline-news {
    margin-bottom: 20px;
  }

  .headline-banner {
    position: relative;
    height: 400px;
    overflow: hidden;
  }

  .headline-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .banner-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    padding: 20px;
    color: white;
  }

  .banner-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .banner-summary {
    font-size: 14px;
    opacity: 0.9;
  }

  /* 新闻内容区 */
  .news-content {
    display: flex;
    gap: 20px;
  }

  /* 左侧新闻列表 */
  .news-list {
    flex: 1;
  }

  .section-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #c40000;
  }

  .news-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
  }

  .news-item:last-child {
    border-bottom: none;
  }

  .news-item.important {
    padding: 20px 0;
  }

  .news-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .news-title:hover {
    color: #c40000;
  }

  .news-summary {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .news-meta {
    font-size: 12px;
    color: #999;
  }

  .news-meta span {
    margin-right: 15px;
  }

  /* 右侧边栏 */
  .sidebar {
    width: 300px;
  }

  .sidebar-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #c40000;
  }

  /* 热门排行 */
  .hot-ranking {
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 20px;
  }

  .ranking-list {
    list-style: none;
    padding: 0;
  }

  .ranking-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
  }

  .ranking-item:last-child {
    margin-bottom: 0;
  }

  .ranking-num {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #ddd;
    color: #666;
    font-size: 12px;
    font-weight: bold;
    margin-right: 10px;
    flex-shrink: 0;
  }

  .ranking-num.top1 {
    background-color: #c40000;
    color: white;
  }

  .ranking-num.top2 {
    background-color: #ff6600;
    color: white;
  }

  .ranking-num.top3 {
    background-color: #ffcc00;
    color: white;
  }

  .ranking-title {
    flex: 1;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    line-height: 20px;
  }

  .ranking-title:hover {
    color: #c40000;
  }

  /* 广告区域 */
  .ad-section {
    margin-bottom: 20px;
  }

  .ad-section img {
    width: 100%;
    height: auto;
  }

  /* 网易公开课 */
  .open-course {
    background-color: #f9f9f9;
    padding: 15px;
  }

  .course-item {
    display: flex;
    margin-bottom: 15px;
  }

  .course-item:last-child {
    margin-bottom: 0;
  }

  .course-item img {
    width: 100px;
    height: 70px;
    object-fit: cover;
    margin-right: 10px;
  }

  .course-info {
    flex: 1;
  }

  .course-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
  }

  .course-teacher {
    font-size: 12px;
    color: #999;
  }

  /* 底部页脚 */
  .footer {
    background-color: #222;
    color: #999;
    padding: 30px 0;
    margin-top: 30px;
  }

  .footer-content {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
  }

  .footer-links {
    margin-bottom: 20px;
    font-size: 14px;
  }

  .footer-links a {
    color: #999;
    text-decoration: none;
    margin: 0 10px;
  }

  .footer-links a:hover {
    color: white;
  }

  .footer-links span {
    color: #666;
  }

  .copyright {
    font-size: 12px;
    line-height: 1.5;
  }

  /* 响应式设计 */
  @media (max-width: 1220px) {
    .nav-container,
    .container,
    .footer-content {
      width: 960px;
    }
    
    .main-nav {
      overflow-x: auto;
      white-space: nowrap;
    }
  }

  @media (max-width: 980px) {
    .nav-container,
    .container,
    .footer-content {
      width: 100%;
      padding: 0 20px;
    }
    
    .news-content {
      flex-direction: column;
    }
    
    .sidebar {
      width: 100%;
    }
    
    .user-actions {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .headline-banner {
      height: 200px;
    }
    
    .banner-title {
      font-size: 18px;
    }
    
    .banner-summary {
      display: none;
    }
  }
</style>
